<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.特殊的写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h4>人:{{person}}</h4>
      <button @click="person.name = 'tony'">修改名字</button>
      <button @click="person.age.a1 += 1">修改真实年龄</button>
      <button @click="person.age.a2 += 1">修改对外年龄</button>
      <button @click="person.car.color = '紫色'">修改汽车颜色</button>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          person:{
            name:'老段',
            age:{a1:52,a2:29},
            car:{color:'绿色',price:100},
          }
        },
        watch:{
          'person.age.a2':{
              handler(value){
                console.log('person.age.a2变化了',value)
              }
          }
        }
      })
    </script>
  </body>
</html>